/**
 * Created by xxx on 2017/5/15.
 */
//用react封装
var currentpage = 1,totlepage = 1,i;//分页的当前页和总的页数
//表单的最高高度、当前第几页、总页数、总行数、设备投放切换、箱号
var otherData = {currentpage:1,totlepage:1,totlerows:1,pageLeft:0,pageRight:0,batchNumber:'',upBatchNumber:''},tableData = [],addresData = [],addresDataOth = [],importRepeatData = [];
var Page = React.createClass({
    setPage: function (e) {
        setPage($(e.target).html());
        this.props.onPageClick(1);
    },
    showPage: function () {
        showPage();
    },
    render: function () {
        {
            var items = [],
                svar = this;
            if(totlepage == 0 ){
                items.push({num:1,checked:true})
            }else if(totlepage < 6){
                for(i = 1;i <= totlepage ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage >= (totlepage-2)) {//点在左边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                for(i = totlepage-2;i <= totlepage ;i++){
                    if(i == currentpage){
                        items.push({num:i,checked:true})
                    }else{
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage <= 3){
                for(i = 1;i <= 3 ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }else {//点在两边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:currentpage-1,checked:false});
                items.push({num:currentpage,checked:true});
                items.push({num:currentpage+1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }
        }
        return (
            <div className="tableInfo-page">
                <div className="page-number">每页<span className="page-number-list" onClick={this.showPage}>{pagecount}</span>条</div>
                <div className="page-list" style={{top:pageListTop+"px"}}>
                    <ul>
                        {
                            pageList.map(function (item) {
                                return (<li onClick={svar.setPage}>{item}</li>)
                            })
                        }
                    </ul>
                </div>
                <div className="page-limit">
                    <ol className="page-limit-ol">
                        <ol className="page-limit-ol">
                            <li className="page-limit-img" name="-1" onClick={otherData.pageLeft == 0?'':svar.props.onPageClick.bind(svar,-1)} ><span className={otherData.pageLeft == 0?'page-limit-left-no':'page-limit-left-yes'}/></li>
                            {
                                items.map(function (item) {
                                    return (<li onClick={isNaN(item.num)?'':svar.props.onPageClick.bind(svar,item.num)} className={item.checked == true?'page-limit-num page-limit-checked':'page-limit-num'} name={item.num}>{item.num}</li>)
                                })
                            }
                            <li className="page-limit-img" name="-2" onClick={otherData.pageRight == 0?'':svar.props.onPageClick.bind(svar,-2)} ><span className={otherData.pageRight == 0?'page-limit-right-no':'page-limit-right-yes'}/></li>
                        </ol>
                    </ol>
                </div>
            </div>
        );
    },
});
//表单组件
var Table = React.createClass({
    render: function () {
        return (
            <tr>
                <td style={{width: '8%'}}>{parseInt(this.props.listNumber)+1}</td>
                <td style={{width: '20%'}}>{this.props.province+this.props.city+this.props.town}</td>
                <td style={{width: '15%'}}>{this.props.devicetype=="1"?"13.56":"2.4G"}考勤卡</td>
                <td style={{width: '15%'}}>{this.props.totalcount==null?"0":this.props.totalcount}</td>
                <td style={{width: '15%'}}>{this.props.putcount==null?"0":this.props.putcount}</td>
                <td style={{width: '15%'}}>{this.props.unputcount==null?"0":this.props.unputcount}</td>
                <td style={{width: '12%'}}>
                    <div onClick={this.props.onClickTableSelect}  className="trButton trLeft">查看</div>
                    <div onClick={this.props.onClickTableDelete} style={{display:"none"}} className="trButton resetPwd trLeft">删除</div>
                </td>
            </tr>
        );
    }
});
//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            otherData:this.props.otherData,
            tableData:this.props.tableData,
            addresData:this.props.addresData,
            addresDataOth:this.props.addresDataOth,
            importRepeatData:this.props.importRepeatData
        }
    },
    componentDidMount: function () {
        var svar = this;
        suixun.ajax(serverUrl+'/deviceInitManage/getDeviceReserveCount.json?param={pagenumber:1,pagecount:"'+pagecount+'"}','',"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                for(var i=0;i<data.info.queryresult.length;i++){
                    var obj=data.info.queryresult[i];
                    tableData[i] = {keyid:i,province:obj.province,city:obj.city,town:obj.town,devicetype:obj.devicetype,totalcount:obj.totalcount,putcount:obj.putcount,unputcount:obj.unputcount};
                }
                var pageRight = 0;
                if(data.info.totlepage > 1){
                    pageRight = 1
                }
                otherData.pageLeft = 0;
                otherData.pageRight = pageRight;
                currentpage = 1;totlepage = data.info.totlepage;//初始化的时候赋值：分页的当前页和总的页数
                svar.setState({tableData:tableData,otherData:otherData});
            }
        });
        var param="param={";
        param = getJsonDataNotEmpty(param,"type","1");
        param += "}";
        suixun.ajax(serverUrl+'/schoolManage/queryRegion.json',param,"get",function(data){
            if(data.code == 200){
                for(var i = 0 ;i < data.info.length;i++ ){
                    addresData[i] = {value:data.info[i].province,type:"1",province:data.info[i].province,city:""};
                }
                addresDataOth = addresData;
                svar.setState({addresData:addresData,addresDataOth:addresDataOth});
            }
        });
    },
    /**
     * addresData
     * 查询地址-省份 addresDataOth
     */
    selectAddress:function (dataName) {
        var svar = this;
        var param="param={";
        param = getJsonDataNotEmpty(param,"type","1");
        param += "}";
        suixun.ajax(serverUrl+'/schoolManage/queryRegion.json',param,"get",function(data){
            if(data.code == 200){
                if(dataName == "addresDataOth"){
                    for(var i = 0 ;i < data.info.length;i++ ){
                        addresDataOth[i] = {value:data.info[i].province,type:"1",province:data.info[i].province,city:""};
                    }
                    svar.setState({addresDataOth:addresDataOth});
                }else{
                    for(var i = 0 ;i < data.info.length;i++ ){
                        addresData[i] = {value:data.info[i].province,type:"1",province:data.info[i].province,city:""};
                    }
                    svar.setState({addresData:addresData});
                }

            }
        });
    },
    /**
     * 查询地址
     * @param e
     */
    queryAddress:function (e) {
        var type = $(e.target).attr("data-type"),
            province = $(e.target).attr("data-province"),
            city = $(e.target).attr("data-city");
        if(type == "1"){
            $(".left-address-value").html(province);
            $(".left-address-value").attr("title",province);
            $(".province").removeClass(" addresses-select");
            $(".province").addClass(" cli");
            $(".city").addClass(" addresses-select");
            $(".area").removeClass(" cli");
        }else  if(type == "2"){
            $(".left-address-value").html(province+"-"+city);
            $(".left-address-value").attr("title",province + "-" + city );
            $(".city").removeClass(" addresses-select");
            $(".city").addClass(" cli");
            $(".area").addClass(" addresses-select");
        }else {
            $(".left-address-value").html(province + "-" + city + "-" + e.target.innerHTML);
            $(".left-address-value").attr("title",province + "-" + city + "-" + e.target.innerHTML);
            $(".addressesOne").hide();
            $(".noPopValue").show();//显示关闭按钮
            this.onPageClick(1);
            return;
        }
        type = parseInt(type)+1;
        var param="param={";
        param = getJsonDataNotEmpty(param,"type",'"'+type+'"');
        param = getJsonDataNotEmpty(param,"province",'"'+province+'"');
        param = getJsonDataNotEmpty(param,"city",'"'+city+'"');
        param += "}";
        var svar = this;
        suixun.ajax(serverUrl+'/schoolManage/queryRegion.json',param,"get",function(data){
            addresData = [];
            if(data.code == 200){
                if(type == "1"){
                    for(var i = 0 ;i < data.info.length;i++ ){
                        addresData[i] = {value:data.info[i].province,type:"1",province:data.info[i].province,city:""};
                    }
                }else if(type == "2"){
                    for(var i = 0 ;i < data.info.length;i++ ){
                        addresData[i] = {value:data.info[i].city,type:"2",city:data.info[i].city,province:province};
                    }
                }else{
                    for(var i = 0 ;i < data.info.length;i++ ){
                        addresData[i] = {value:data.info[i].town,type:"3",city:city,province:province};
                    }
                }
            }
            svar.setState({addresData:addresData});
        });
    },
    /**
     * 点击城市
     * @param e
     */
    onClickCity: function (e) {
        var type = $(e.target).attr("data-type"),addres = $(".left-address-value").html(),addreses = addres.split("-"),province = "",city = "";
        if(addres == "选择省市区"){
            return;
        }
        if(type == "1"){
            province = "";
            city = "";
        }else if(type == "2"){
            if(addreses[0] != ""){
                province = addreses[0];
                city = "";
            }else{
                return;
            }
        }else if(type == "3"){
            if(addreses[0] != "" && addreses.length > 1){
                province = addreses[0];
                city = addreses[1];
            }else{
                return;
            }
        }else if(type == "4"){
            $(".addressesOne").hide();
            return;
        }
        $(e.target).addClass(" addresses-select").siblings().removeClass(" addresses-select");
        if(addreses[0] != "" && addreses.length == 1){
            $(".city").addClass("cli");
            $(".province").addClass("cli");
            $(".area").removeClass(" cli");
        }else if(addreses.length == 2 || addreses.length == 3){
            $(".city").addClass("cli");
            $(".province").addClass("cli");
            $(".area").addClass(" cli");
        }else{
            $(".city").removeClass("cli");
            $(".area").removeClass(" cli");
        }
        var param="param={";
        param = getJsonDataNotEmpty(param,"type",'"'+type+'"');
        param = getJsonDataNotEmpty(param,"province",'"'+province+'"');
        param = getJsonDataNotEmpty(param,"city",'"'+city+'"');
        param += "}";
        var svar = this;
        suixun.ajax(serverUrl+'/schoolManage/queryRegion.json',param,"get",function(data){
            addresData = [];
            if(data.code == 200){
                if(type == "1"){
                    for(var i = 0 ;i < data.info.length;i++ ){
                        addresData[i] = {value:data.info[i].province,type:"1",province:data.info[i].province,city:""};
                    }
                }else if(type == "2"){
                    for(var i = 0 ;i < data.info.length;i++ ){
                        addresData[i] = {value:data.info[i].city,type:"2",city:data.info[i].city,province:province};
                    }
                }else{
                    for(var i = 0 ;i < data.info.length;i++ ){
                        addresData[i] = {value:data.info[i].town,type:"3",city:city,province:province};
                    }
                }
            }
            svar.setState({addresData:addresData});
        });
    },
    //区域储备量
    onClickDeviceReserve: function () {
        window.location.href = "../deviceonReserve/queryonReserveList.html";
    },
    /**
     * 分页
     * @param num
     */
    onPageClick: function (num) {
        //分页-调用ajac然后把数据查询出来:获取name的值
        //计算currentpage
        suixun.showLoding();//显示加载中
        var onPageLeft = 0,onPageRight = 1,savr = this;
        if(num > 0){
            currentpage = num;
        }else if(num == -1 && currentpage > 1){
            currentpage --;
        }else if(num == -2  && currentpage < totlepage){
            currentpage ++;
        }else{
            return;
        }
        //修改左右的按钮
        if((currentpage == totlepage && totlepage == 1)|| totlepage == 0){
            onPageLeft = 0;
            onPageRight = 0;
        }else if(currentpage == totlepage && totlepage > 1){
            onPageLeft = 1;
            onPageRight = 0;
        }else if(1 < currentpage && currentpage < totlepage){
            onPageLeft = 1;
            onPageRight = 1;
        }
        var address = $(".left-address-value").html(),timeCard = $(".left-timeCard-value").html();
        var param="param={";
        if(address.split("-").length == 3){
            param = getJsonDataNotEmpty(param,"province",'"'+address.split("-")[0]+'"');
            param = getJsonDataNotEmpty(param,"city",'"'+address.split("-")[1]+'"');
            param = getJsonDataNotEmpty(param,"town",'"'+address.split("-")[2]+'"');
        }
        if(timeCard == "2.4G"){
            param = getJsonDataNotEmpty(param,"devicetype","2");
        }else if(timeCard == "13.56"){
            param = getJsonDataNotEmpty(param,"devicetype","1");
        }
        param = getJsonDataNotEmpty(param,"pagenumber",'"'+currentpage+'"');
        param = getJsonDataNotEmpty(param,"pagecount",pagecount+'');
        param += "}";
        console.log(param);
        suixun.ajax(serverUrl+'/deviceInitManage/getDeviceReserveCount.json',param,"get",function(data){
            tableData = [];
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                if(data.info.queryresult != null){
                    for(var i=0;i<data.info.queryresult.length;i++){
                        var obj=data.info.queryresult[i];
                        tableData[i] = {keyid:i,province:obj.province,city:obj.city,town:obj.town,devicetype:obj.devicetype,totalcount:obj.totalcount,putcount:obj.putcount,unputcount:obj.unputcount};
                    }
                    if(data.info.totlepage > 1 && data.info.totlepage > currentpage){
                        onPageRight = 1
                    }else{
                        onPageRight = 0;
                    }
                    otherData.pageLeft = onPageLeft;
                    otherData.pageRight = onPageRight;
                    totlepage = data.info.totlepage;//初始化的时候赋值：分页的当前页和总的页数
                    savr.setState({tableData:tableData,otherData:otherData});
                }else{
                    otherData.pageLeft = 0;
                    otherData.pageRight = 0;
                    totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                    savr.setState({tableData:tableData,otherData:otherData});
                }
            }
        });
    },
    /**
     * 点击考勤卡类型
     * @returns {XML}
     */
    onClickTimeTardType: function (e) {
        this.onPageClick(1);
    },
    /**
     * 点击选择地区
     * @returns {XML}
     * @param e
     */
    onClickAddressSelect: function (e) {
        var className = $(e.target).attr("data-address");
        if($("."+className).is(":hidden")){
            $("."+className).show();
        }else{
            $("."+className).hide();
        }
    },
    /**
     * 清空地区并隐藏地区
     *  然后去调用分页
     * @returns {XML}
     */
    onClickCloseInput: function () {
        $(".left-address-value").html("选择省市区");
        $(".addressesOne").hide();
        $(".noPopValue").hide();
        $(".province").addClass(" addresses-select cli");
        $(".city").removeClass("cli addresses-select");
        $(".area").removeClass(" cli addresses-select");
        this.selectAddress("addresData");
        this.onPageClick(1);
    },
    /**
     * 弹出层-省市区输入框的关闭图标
     */
    onClickClosePopInput: function () {
        $("#popAddress").val("");
        $(".addressesTwo").hide();
        $(".isPopValue").hide();
        $(".provinceOth").addClass(" addresses-select cli");
        $(".cityOth").removeClass("cli addresses-select");
        $(".areaOth").removeClass(" cli addresses-select");
        this.selectAddress("addresDataOth");
    },
    /**
     * 查询详情
     * @returns {XML}
     * @param info 省市区
     */
    onClickTableSelect: function (info) {
        localStorage.address = info[0]+"-"+info[1]+"-"+info[2];
        localStorage.reserveDeviceType = info[3];
        if(info[4] == null){
            info[4] = 0;
        }
        localStorage.remainingValue = info[4];
        window.location.href = "./queryonReserveListDetail.html";
    },
    /**
     * 删除
     * @returns {XML}
     * @param info 省市区
     */
    onClickTableDelete: function (info) {

    },
    /**
     * 新增区域存储设备
     * @returns {XML}
     */
    onClockAdd: function () {

    },
    /**
     * 显示新增存储设备弹出层
     * @returns {XML}
     */
    showPop: function () {
        $("#popAddress").val("");
        $(".fileName").html("");
        $("#file").val("");
        $(".isPopValue").hide();
        $(".cityOth").removeClass(" cli addresses-select");
        $(".areaOth").removeClass(" cli addresses-select");
        $(".provinceOth").addClass(" cli addresses-select");
        this.selectAddress("addresDataOth");
        $(".addReserve").show();

    },
    /**
     *  关闭弹出层
     * @returns {XML}
     */
    onClickHidePop: function () {
        $(".popModel").hide();
    },
    //选择Excel文件
    onChangFile: function () {
        var fileUrl = $("#file").val().split('\\');//注split可以用字符或字符串分割
        var fileName = fileUrl[fileUrl.length-1];//这就是要取得的图片名称
        var fileLat = fileName.substring( fileName.lastIndexOf('.')+1 );//后缀名称
        console.log(fileLat);
        if(fileLat == "xls" || fileLat == "xlsx" ){
            $(".fileName").html("已选择："+fileName);
        }else{
            suixun.alert("请选择Excel文件上传!",function (data) {
                if(data){
                    $(".fileName").html("");
                }
            });
        }
    },
    /**
     * 新增区域储备量-弹出层
     * 点击城市
     * @param e
     */
    onClickCityOth: function (e) {
        var type = $(e.target).attr("data-type"),addres = $("#popAddress").val(),addreses = addres.split("-"),province = "",city = "";
        if(type == "1"){
            province = "";
            city = "";
        }else if(type == "2"){
            if(addreses[0] != ""){
                province = addreses[0];
                city = "";
            }else{
                return;
            }
        }else if(type == "3"){
            if(addreses[0] != "" && addreses.length > 1){
                province = addreses[0];
                city = addreses[1];
            }else{
                return;
            }
        }else if(type == "4"){
            $(".addressesTwo").hide();
            return;
        }
        $(e.target).addClass(" addresses-select").siblings().removeClass(" addresses-select");
        if(addreses[0] != "" && addreses.length == 1){
            $(".cityOth").addClass("cli");
            $(".provinceOth").addClass("cli");
            $(".areaOth").removeClass(" cli");
        }else if(addreses.length == 2 || addreses.length == 3){
            $(".cityOth").addClass("cli");
            $(".provinceOth").addClass("cli");
            $(".areaOth").addClass(" cli");
        }else{
            $(".cityOth").removeClass("cli");
            $(".areaOth").removeClass(" cli");
        }
        var param="param={";
        param = getJsonDataNotEmpty(param,"type",'"'+type+'"');
        param = getJsonDataNotEmpty(param,"province",'"'+province+'"');
        param = getJsonDataNotEmpty(param,"city",'"'+city+'"');
        param += "}";
        var svar = this;
        suixun.ajax(serverUrl+'/schoolManage/queryRegion.json',param,"get",function(data){
            addresDataOth = [];
            if(data.code == 200){
                if(type == "1"){
                    for(var i = 0 ;i < data.info.length;i++ ){
                        addresDataOth[i] = {value:data.info[i].province,type:"1",province:data.info[i].province,city:""};
                    }
                }else if(type == "2"){
                    for(var i = 0 ;i < data.info.length;i++ ){
                        addresDataOth[i] = {value:data.info[i].city,type:"2",city:data.info[i].city,province:province};
                    }
                }else{
                    for(var i = 0 ;i < data.info.length;i++ ){
                        addresDataOth[i] = {value:data.info[i].town,type:"3",city:city,province:province};
                    }
                }
            }
            svar.setState({addresDataOth:addresDataOth});
        });
    },
    /**
     * 新增区域储备量-弹出层
     * 查询地址
     * @param e
     */
    queryAddressOth:function (e) {
        var type = $(e.target).attr("data-type"),
            province = $(e.target).attr("data-province"),
            city = $(e.target).attr("data-city");
        if(type == "1"){
            $("#popAddress").val(province);
            $(".provinceOth").removeClass(" addresses-select");
            $(".provinceOth").addClass(" cli");
            $(".cityOth").addClass(" addresses-select");
            $(".areaOth").removeClass(" cli");
        }else  if(type == "2"){
            $("#popAddress").val(province+"-"+city);
            $(".cityOth").removeClass(" addresses-select");
            $(".cityOth").addClass(" cli");
            $(".areaOth").addClass(" addresses-select");
        }else {
            $("#popAddress").val(province + "-" + city + "-" + e.target.innerHTML);
            $(".addressesTwo").hide();
            $(".isPopValue").show();
            return;
        }
        type = parseInt(type)+1;
        var param="param={";
        param = getJsonDataNotEmpty(param,"type",'"'+type+'"');
        param = getJsonDataNotEmpty(param,"province",'"'+province+'"');
        param = getJsonDataNotEmpty(param,"city",'"'+city+'"');
        param += "}";
        var svar = this;
        suixun.ajax(serverUrl+'/schoolManage/queryRegion.json',param,"get",function(data){
            addresDataOth = [];
            if(data.code == 200){
                if(type == "1"){
                    for(var i = 0 ;i < data.info.length;i++ ){
                        addresDataOth[i] = {value:data.info[i].province,type:"1",province:data.info[i].province,city:""};
                    }
                }else if(type == "2"){
                    for(var i = 0 ;i < data.info.length;i++ ){
                        addresDataOth[i] = {value:data.info[i].city,type:"2",city:data.info[i].city,province:province};
                    }
                }else{
                    for(var i = 0 ;i < data.info.length;i++ ){
                        addresDataOth[i] = {value:data.info[i].town,type:"3",city:city,province:province};
                    }
                }
            }
            svar.setState({addresData:addresDataOth});
        });
    },
    /**
     * 确定导入
     * @returns {XML}
     */
    onClickAdd: function () {
        var popAddress = $("#popAddress").val(),
            svar = this,
            fileName = $(".fileName").html();
        if(popAddress == ""){
            suixun.alert("省市区不能为空！");
            return;
        }else if(popAddress.split("-").length != 3){
            suixun.alert("选择完整的省市区！");
            return;
        }
        $(".addReserve").hide();
        if(fileName != ""){
            suixun.showLoding();//显示加载中
            var formData=new FormData($("#excelInputFrom")[0]);
            var param="param={";
            param = getJsonDataNotEmpty(param,"province",'"'+popAddress.split("-")[0]+'"');
            param = getJsonDataNotEmpty(param,"city",'"'+popAddress.split("-")[1]+'"');
            param = getJsonDataNotEmpty(param,"town",'"'+popAddress.split("-")[2]+'"');
            param += "}";
            suixun.ajax(serverUrl+'/deviceInitManage/addDeviceReserve.json?'+param,formData,"post",function(data){
                suixun.hideLoding(200);//隐藏加载中
                if(data.code == 200 && data.info == null){//成功
                    suixun.alert('导入成功',function (data) {
                        if(data){
                            $(".addReserve").hide();
                            svar.onClickQueryLastDev();
                        }
                    })
                }else if(data.code == 200 && data.info != null){//有重复数据
                    suixun.alert('此次导入有重复数据！',function (data) {
                        if(data){
                            svar.onPageClick(currentpage);
                            $(".popImportRepeat").show();
                            $(".addReserve").hide();
                        }
                    });
                    importRepeatData = data.info;
                    svar.setState({importRepeatData:importRepeatData});
                }else{
                    suixun.alert(data.msg);
                }
            });
        }else{
            suixun.alert("请选择上传文件!");
        }
    },
    /**
     * 导出模版下载
     * @returns {XML}
     */
    excleModel: function () {
        suixun.confirm_noTit("是否导出Excel模版？",function (data) {
            if(data){
                window.location.href = serverUrl+"/deviceInitManage/export_DeviceReserveTemplate.json";
            }
        });
    },
    /**
     * 跳转到导入历史页面
     * @returns {XML}
     */
    onClickQueryLastDev: function () {
        window.location.href = "./queryonReserveHistoryList.html";
    },
    render: function () {
        {
            var svar = this,onClickArray = [this.onClickTableSelect,this.onClickTableDelete];
            var Tabels = this.state.tableData.map(function (data,index) {
                return (
                    <Table key={index} listNumber={index} onClickTableSelect={onClickArray[0].bind(svar,[data.province,data.city,data.town,data.devicetype,data.unputcount])} onClickTableDelete={onClickArray[1].bind(svar,[data.province,data.city,data.town])}
                           province={data.province} city={data.city} town={data.town} devicetype={data.devicetype} totalcount={data.totalcount} putcount={data.putcount} unputcount={data.unputcount} />
                )
            });
            /**
             * 导入重复数据
             */
            var importRepeatDatas = importRepeatData.map(function (data,index) {
                return (
                    <tr style={{height: "36px"}}>
                        <td style={{width: '20%'}}>{parseInt(index)+1}</td>
                        <td style={{width: '80%'}}>{data.cardid}</td>
                    </tr>
                )
            }.bind(this));
        }
        return (
            <div className="outside " >
                <div className="school tableManage-body">
                    <div className="header-menu">
                        <ul>
                            <li><a href="../schoolManage/querySchoolList.html">学校</a></li>
                            <li><a href="../deviceInitManage/queryDeviceInitList.html">设备管理</a></li>
                            <li><a href="../simInfoManage/querySimInfoList.html">SIM卡管理</a></li>
                            <li style={{display:"none"}}><a href="../packageManage/queryPackageList.html">设备套餐</a></li>
                            <li style={{display:"none"}}><a href="../devicePriceManage/queryDevicePriceList.html">设备零售价</a></li>
                            <li onClick={this.onClickDeviceReserve} className="select">区域储备量</li>
                            <li><a href="../attendance/attendanceMange.html">考勤机管理</a></li>
                        </ul>
                        <div onClick={this.excleModel} className="excleModel" >
                            <img src="../img/icon/annotations.png" />
                            <span>导出Excel模版下载</span>
                        </div>
                    </div>
                    <div className="pop popPhone popModel popImportRepeat ">
                        <div className="model"></div>
                        <div className="pop-info popModel-info popPhone-info">
                            <div className="pop-title popPhone-title">
                        <span className="pop-title-content popPhone-title-content" style={{fontSize:"18px"}}>
                            <span className="pop-title-content-solid-left popPhone-title-content-solid-left"/>
                                区域储备量导入重复数据
                            <span className="pop-title-content-solid-right popPhone-title-content-solid-right"/>
                        </span>
                                <span className="pop-title-img popPhone-title-img" onClick={this.onClickHidePop}><img src="../img/icon/close.png" alt="关闭"/></span>
                                <input type="hidden" name="batch_id" id="batch_id"/>
                            </div>
                            <div className="pop-body ">
                                <div className="tableInfo importRepeatTableInfo">
                                    <div className="studentsInfo-data tableInfo-data">
                                        <div className="studentsInfo-data-table tableInfo-data-table" >
                                            <table className="head-body ">
                                                <thead>
                                                    <th style={{width: '20%',height: "10px"}}>序号</th>
                                                    <th style={{width: '80%',height: "30px"}}>考勤卡号</th>
                                                </thead>
                                                <tbody >
                                                {importRepeatData==""?'':importRepeatDatas}
                                                </tbody>
                                            </table>
                                            {importRepeatData==""?<div className="tableNoData">{tableNoDataCount}</div>:''}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="messagePrompt" >注：以上为此次导入重复数据，其他数据已导入成功!</div>
                        </div>
                    </div>
                    <div className="popAddMessage popModel addReserve">
                        <div className="model"></div>
                        <div className="popAddMessage-info popModel-info">
                            <div className="popModel-title">
                                <span className="popModel-title-content">
                                    <span className="popModel-title-content-solid-left"/>
                                        新增区域存储设备
                                    <span className="popModel-title-content-solid-right"/>
                                </span>
                                <span className="popModel-title-img" onClick={this.onClickHidePop}><img src="../img/icon/close.png" alt="关闭"/></span>
                            </div>
                            <div className="popModel-body">
                                <div className="popModel-body-input">
                                    <span className="popModel-body-input-title">选择区域</span>
                                        <span className="popModel-body-input-content popAddress-content">
                                        <input className="input-content text-sub" onClick={this.onClickAddressSelect} style={{width: "300px"}} data-address="addressesTwo" id="popAddress" type="text" maxLength="100" readOnly="readOnly"  placeholder="选择省市区" />
                                    </span>
                                    <span className="lower-right-close isPopValue" onClick={this.onClickClosePopInput} />
                                    <div className="addresses addressesTwo"  >
                                        <div className="addresses-title">
                                            <ul className="city-tab">
                                                <li className="city-tab-list provinceOth addresses-select cli" onClick={this.onClickCityOth} data-type="1">省 份</li>
                                                <li className="city-tab-list cityOth" onClick={this.onClickCityOth} data-type="2">城 市</li>
                                                <li className="city-tab-list areaOth" onClick={this.onClickCityOth} data-type="3">区（县）</li>
                                            </ul>
                                        </div>
                                        <div className="addresses-content">
                                            <ul className="addresses-content-item">
                                                {
                                                    addresDataOth.map(function(data){
                                                        return(
                                                            <li  onClick={svar.queryAddressOth} data-type={data.type} data-province={data.province} data-city={data.city} title={data.value} className="addresses-item-center text-sub">{data.value}</li>
                                                        )
                                                    })
                                                }
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div className="popModel-body-input ">
                                    <span className="popModel-body-input-title">批量导入</span>
                                    <form name="excelInputForm" id="excelInputFrom"  enctype="multipart/form-data" method="post">
                                        <a href="javascript:;" className="file">选择文件
                                            <input type="file" onChange={this.onChangFile}  name="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/vnd.ms-excel,application/vnd.ms-excel,application/vnd.ms-excel,application/vnd.ms-excel " id="file" />
                                        </a>
                                    </form>
                                    <span className="fileName" />
                                </div>
                            </div>
                            <div className="popModel-button" style={{bottom: "20px"}}>
                                <span className="popModel-button-ok" onClick={this.onClickAdd}>确定导入</span>
                            </div>
                        </div>
                    </div>
                    <header>
                        <div className="header-left">
                            <div className="header-left-select address-select " >
                                <div className="election-value left-address-value text-sub" title="选择省市区" data-address="addressesOne" onClick={this.onClickAddressSelect} >选择省市区</div>
                                <span className="lower-right-corner" onClick={this.onClickAddressSelect} />
                                <span className="lower-right-close noPopValue" onClick={this.onClickCloseInput} />
                                <div className="addresses addressesOne" >
                                    <div className="addresses-title">
                                        <ul className="city-tab">
                                            <li className="city-tab-list province addresses-select cli" onClick={this.onClickCity} data-type="1">省 份</li>
                                            <li className="city-tab-list city" onClick={this.onClickCity} data-type="2">城 市</li>
                                            <li className="city-tab-list area" onClick={this.onClickCity} data-type="3">区（县）</li>
                                        </ul>
                                    </div>
                                    <div className="addresses-content">
                                        <ul className="addresses-content-item">
                                            {
                                                addresData.map(function(data){
                                                    return(
                                                        <li onClick={svar.queryAddress} data-type={data.type} data-province={data.province} data-city={data.city} title={data.value} className="addresses-item-center text-sub">{data.value}</li>
                                                    )
                                                })
                                            }
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div className="header-left-select droup-select timeCard-select">
                                <div className="election-value left-timeCard-value" >考勤卡类型:全部</div>
                                <span className="lower-right-corner" />
                                <div className="drop-down left-drop-down">
                                    <span className="select-value" onClick={this.onClickTimeTardType}>考勤卡类型:全部</span>
                                    <span className="select-value" onClick={this.onClickTimeTardType}>2.4G</span>
                                    <span className="select-value" onClick={this.onClickTimeTardType}>13.56</span>
                                </div>
                            </div>
                        </div>
                        <div className="header-right" style={{right:'-12px'}}>
                            <div style={{width:'80px',marginRight:'0px'}} className="addButton" onClick={this.onClickQueryLastDev}>最后入库</div>
                            <div className="addButton" style={{width:"150px"}} onClick={this.showPop}>
                                <span className="addButton-img" style={{left: "-55px"}}><img src="../img/icon/add-white.png" /></span>
                                <span className="addButton-text" style={{width:"100px",left:"40px"}}>新增区域储备量</span>
                            </div>
                        </div>
                    </header>
                    <div className="parentsInfo tableInfo">
                        <div className="parentsInfo-data tableInfo-data">
                            <div className="parentsInfo-data-table tableInfo-data-table" >
                                <table className="head-body head-body">
                                    <thead>
                                    <th style={{width: '8%'}}>序号</th>
                                    <th style={{width: '20%'}}>省市区</th>
                                    <th style={{width: '15%'}}>考勤卡类型</th>
                                    <th style={{width: '15%'}}>总储备量</th>
                                    <th style={{width: '15%'}}>投放数量</th>
                                    <th style={{width: '15%'}}>剩余数量</th>
                                    <th style={{width: '12%'}}>操作</th>
                                    </thead>
                                    <tbody>
                                    {this.state.tableData==""?'':Tabels}
                                    </tbody>
                                </table>
                                {this.state.tableData==""?<div className="tableNoData">{tableNoDataCount}</div>:''}
                            </div>
                        </div>
                        <Page otherData={this.state.otherData} onPageClick={this.onPageClick} />
                    </div>
                    <footer id="copyright">
                        <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                    </footer>
                </div>
            </div>
        );
    }
});
ReactDOM.render(
    <Main  otherData={otherData} tableData={tableData} addresData={addresData} addresDataOth={addresDataOth} importRepeatData={importRepeatData} />,
    document.getElementById('tableManage')
);
/**
 * 点击是否投放
 */
$(".timeCard-select").click(function () {
    var dropDown = $('.left-drop-down');
    if(dropDown.is(":hidden")){
        dropDown.slideDown();
    }else{
        dropDown.slideUp();
    }
});
//批号下拉列表
$("*").bind("click",function(e){
    var target = $(e.target);
    if(target.closest(".select-value").length == 1){
        $(".left-timeCard-value").html($(target).html());
        $('.left-drop-down').slideUp();
    }else if(target.closest(".timeCard-select").length == 1 || target.closest(".city-tab-list").length == 1 || target.closest(".addresses-item-center").length == 1 || target.closest(".addresses-content").length == 1 ){

    }else{
        $('.left-drop-down').slideUp();
        $('.addressesOne').hide();
        $('.addressesTwo').hide();
    }
});